<template>
    <div>
        <Picker title="时长频次" :is-show="show" :columns="typeColumns" @close="close" @confirm="frequencyConfirm"></Picker>
    </div>
</template>

<script lang="ts" setup>
import Picker from '@/components/DurationSelecter/index.vue';
import { computed} from 'vue';
import { getDurationAndFrequency } from '@/api/common';
import { onMounted, ref } from 'vue';

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    formatorColumns: {
        type: Function,
        default: null
    },
    // 默认显示的时长频次
    durationFrequency: {
        type: Array,
        default: () => [5, 300],
    }
});

const show = computed(() => props.isShow);

const emit = defineEmits(['close', 'confirm']);

export interface typeColumnsModel{
    values: string[],
    defaultIndex: number;
}

const typeColumns = ref<typeColumnsModel[]>([]);

const frequencyConfirm = (value:string | string[])=>{
    emit('confirm', value);
};

const close = ()=>{
    emit('close');
};

const initData = async ()=>{
    const res = await getDurationAndFrequency();
    if(res){
        const defaultDurationIndex = res.duration.findIndex(item => item === props.durationFrequency[0]);
        const defaultFrequencyIndex = res.frequency.findIndex(item => item === props.durationFrequency[1]);
        typeColumns.value[0] = {
            values: res.duration.map(item=>`${item}s`),
            defaultIndex: defaultDurationIndex
        };
        typeColumns.value[1] = {
            values: res.frequency.map(item=>`${item}次`),
            defaultIndex: defaultFrequencyIndex
        };
    }
    props.formatorColumns && props.formatorColumns(typeColumns);
};

onMounted(async()=>{
    await initData();
});
</script>

